<template>
	<view class="container">
		<image src="/static/bg.png" class="bg" mode=""></image>
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-40">
				<view class="waibOx p-r">
					<image src="/static/home/sceh.png" class="sceh" mode=""></image>
					<input type="text" v-model="value" @confirm="givMi" placeholder="请输入书籍名称进行搜索" class="inp" name=""
						id="">
				</view>
			</view>
		</view>
		<!-- 下面的 -->
		<view class="body f">
			<!-- /左边的 -->
			<view class="left">
				<view v-for="(item,index) in leftList" :key="index" @click="leftClick(item,index)" class="leftItem"
					:class="{active:index==ind}">
					{{item.name}}
				</view>
			</view>
			<!-- 、右边的 -->
			<view class="right">
				<scroll-view class="sclo" scroll-y style="height: 100%;width: 100%;" @scrolltolower="towOnreachBottom">
					<div style="width: 100%;padding-left: 15rpx;" class="f f-a-c">
						<view class="topTabs p-15 f f-a-c">
							<view v-for="(item,index) in ageList" :key="index" @click="rigClick(item,index)"
								class="age m-r-10" :class="{acts:index==youInd}">
								{{item.name}}
							</view>
						</view>
						<view class="m-l-10">
							<image src="/static/youImg.png" class="" style="width: 24rpx;height: 24rpx;" mode="">
							</image>
						</view>
					</div>
					<!-- 下面的列表 -->
					<view class="itemList">

						<view v-for="(item,index) in list" :key="index" @click="booksFn(item)"
							class="itemBooks f f-a-c m-b-30">
							<div class="booksImg">
								<image :src="item.cover" class="booksImg m-r-20" mode="aspectFit"></image>
							</div>
							<view class="booksRight">
								<view class="tits f f-a-c m-t-10 m-b-10">
									<view class="oneNights m-r-10">
										{{item.name}}
									</view>
									<view class="children">
										{{item.category.name}}
									</view>
								</view>
								<view class="age">
									{{item.author}}著 {{item.press}}
								</view>
								<view class="age m-t-10">
									适读年龄：{{item.age_limit.name}}
								</view>
								<view class="botColor f f-a-c m-t-10">
									<view v-for="(ite,ind) in item.tags" :key="ind" class="lef m-r-10">
										{{ite.name}}
									</view>
									<!-- 	<view class="lef">
										启蒙教育启蒙教育
									</view> -->
								</view>
							</view>
						</view>
						<view v-if="list.length==0" class="zanwu">
							暂无记录
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				age_limit_id: uni.getStorageSync('initData').age_limits[0].id,
				ageList: uni.getStorageSync('initData').age_limits,
				category_id: '',
				youInd: 0,
				ind: uni.getStorageSync('tabsNum') || 0,
				list: [],
				leftList: [{
					name: '全部'
				}, {
					name: '儿童文学'
				}, {
					name: '入学入园'
				}, {
					name: '教育启蒙'
				}, {
					name: '英文阅读'
				}, {
					name: '逻辑思维'
				}, {
					name: '少儿绘本'
				}, {
					name: '动漫卡通'
				}],
				value: '',
				page: 1
			}
		},
		onShow() {
			this.StartData()
			this.ind = uni.getStorageSync('tabsNum') || 0
			this.initList()
			// 这个是书籍列表
			// setTimeout(() => {

			// }, 1000)
		},
		onLoad() {
			this.ind = uni.getStorageSync('tabsNum') || 0

		},
		onHide() {
			this.value = ''
			uni.removeStorageSync('tabsNum')
		},
		methods: {
			async StartData() {
				let n = await this.$api.Setup()
				uni.setStorageSync('setup', n.data)
				uni.setStorageSync('domain', n.data.qiniu_config.domain)
				uni.setStorageSync('upload_token', n.data.qiniu_config.upload_token)
				uni.setStorageSync('upload_domain', n.data.qiniu_config.upload_domain)
			},
			async initList() {
				let n = await this.$api.BookClassification()
				this.leftList = n.data.categories
				this.leftList.unshift({
					name: '全部',
					id: ''
				})
				// if (this.ind != 0) {
				// 	this.category_id = this.leftList[this.ind + 1].id
				// } else {
				this.category_id = this.leftList[this.ind].id
				this.initRigList()
				// }
			},
			async initRigList() {
				let n = await this.$api.SelectionList({
					page: this.page,
					q: this.value,
					category_id: this.category_id,
					age_limit_id: this.age_limit_id
				})
				if (this.page == 1) {
					this.list = n.data.data
				} else {
					this.list = [...this.list, ...n.data.data]
				}
			},
			// 滑到下面
			towOnreachBottom() {
				this.page++
				this.initRigList()
				console.log('123456');
			},
			// 点击跳转详情
			booksFn(item) {
				uni.navigateTo({
					url: `/pages/index/DetailsPage?id=${item.id}`
				})
			},
			// /跳转到书籍
			givMi() {
				uni.navigateTo({
					url: `/pages/index/Books?q=${this.value}&category_id=${this.category_id}&age_limit_id=${this.age_limit_id}`
				})
			},
			// /右面的切换
			rigClick(item, index) {
				this.youInd = index
				this.age_limit_id = item.id
				this.page = 1
				this.list = []
				// 
				this.initRigList()
			},
			// /左面的切换
			leftClick(item, index) {
				console.log(index, '123');
				this.ind = index
				this.category_id = item.id
				this.page = 1
				this.list = []
				this.youInd = 0 //切换左边的时候右边变成零
				this.age_limit_id = uni.getStorageSync('initData').age_limits[0].id
				// 
				this.initRigList()
			},
			backs() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zanwu {
		margin-top: 50%;
		margin-left: 60%;
		transform: translate(-50%, -50%);
		font-size: 36rpx;
		font-weight: 600;
		color: #009d85;
	}

	.itemList {
		padding: 20rpx;
	}

	.topTabs {
		height: 100rpx;
		width: 90%;
		// top: 0;
		// left: 0;
		// z-index: 999;
		// position: absolute;
		overflow-x: auto;

		.age {
			width: 150rpx;
			height: 52rpx;
			padding: 5rpx 10rpx;
			background: #f8f8f8;
			border-radius: 26rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #999999;
			flex-basis: 150rpx;
			flex-shrink: 0;
		}


	}

	.xian {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
		height: 2rpx;
		background: #dcdbdb;
	}

	.booksImg {
		width: 160rpx;
		height: 210rpx;
		border-radius: 20rpx;
		margin-right: 10rpx;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.lef {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff9e8;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #ecbf2f;
	}

	.age {
		width: 90%;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		// -o-text-overflow: ellipsis;
	}

	.itemImg {
		width: 100%;
		height: 196rpx;
		border-radius: 20rpx;
	}

	.children {
		width: 118rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #edf8f6;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #009d85;
	}

	.oneNights {
		width: 190rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
		max-width: 300px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.acts {
		background-color: #009d85 !important;
		color: #ffffff !important;
	}

	.topTabs::-webkit-scrollbar {
		display: none
	}

	.leftItem {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 700;
		text-align: center;
		color: #666;
		margin: 45rpx 0;
	}

	.active {
		color: #009d85;
	}

	.body {
		height: calc(100vh - 180rpx);
		overflow-y: auto;
		background-color: #f6f6f6;

		.left {
			position: relative;
			z-index: 99999999999;
			width: 168rpx;
			height: 100%;
			background: #ffffff;
			overflow-y: auto;
			border-radius: 0rpx 16rpx 0rpx 0rpx;
		}

		.right {
			position: relative;
			z-index: 99999999999;
			width: 72%;
			background-color: #fff;
			height: 100%;
			margin-left: 3%;
			// padding-top: 100rpx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			overflow-y: auto;
		}
	}

	.sclo {
		// padding-top: 100rpx;
	}

	.item {
		background-color: pink;
		width: 100%;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.waibOx {
		width: 60%;
	}

	.bg {
		position: fixed;
		top: 0%;
		left: 0%;

		width: 100%;
		height: 338rpx;
	}

	.sceh {
		position: absolute;
		width: 24rpx;
		height: 26rpx;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}




	.heat {
		height: 200rpx;
		width: 100%;
		background-color: pink;
		margin-bottom: 30rpx;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 338rpx;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;

		// background-color: pink;
		.inp {
			width: 100%;
			height: 72rpx;
			background: #ffffff;
			border-radius: 36rpx;
			padding-left: 50rpx;
		}

	}

	.topHeacd {
		height: 70rpx;
	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		// background-color: #fff;
		z-index: 99;
	}

	.toBg {
		height: 250px;
		width: 100%;
		position: fixed;
		top: 0%;
		left: 0;
		z-index: -1;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	.tabbar {
		// background-color: pink;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1;

		.tits {
			// position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.jian {
				position: absolute;
				left: 20px;
				width: 40rpx;
			}

			.tit_name {
				font-size: 32rpx;
			}
		}
	}

	.tit {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: 17px;
	}

	.container {
		height: 100vh;
		width: 100%;
		padding-top: 180rpx;
		overflow-y: auto;
	}
</style>